<template>
  <div class="workdialog">
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="45%">
      <div>
        <div>
          <el-steps :active="active">
            <el-step title="填报"></el-step>
            <el-step title="提交"></el-step>
            <el-step title="接单"></el-step>
            <el-step title="处理"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
        <div class="title">
          {{ active==1||active==2?'新增报修工单':active==3?'工单信息':'报修处理' }}
        </div>
        <div>
          <el-form ref="form" :model="formdata" label-width="80px" :disabled="active!==1||flag?true :false" :rules="rules">
              <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属企业" prop="orgNo">
                      <el-select v-model="formdata.orgNo" size="small" filterable style="width: 100%;" :disabled="isupdate">
                        <el-option v-for="(item, index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="业务类型" prop="type">
                      <el-select v-model="formdata.type" size="small" filterable style="width: 100%;" @change="changetype">
                        <el-option v-for="(item, index) in typelist" :key="index" :label="item.text" :value="item.value" ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row >
                  <el-col :span="24">
                    <el-form-item label="标签编号" prop="code">
                      <el-input v-model="formdata.code" placeholder="选择业务类型后自动生成" size="small" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row >
                  <el-col :span="24">
                    <el-form-item label="工单标题" prop="title">
                      <el-input v-model="formdata.title" placeholder="请输入工单标题" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row >
                  <el-col :span="24">
                    <el-form-item label="问题描述" prop="problemDescription">
                      <el-input v-model="formdata.problemDescription" type="textarea" placeholder="请输入问题描述" ></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row >
                  <el-col :span="24">
                    <el-form-item label="图片">
                      <el-upload
                        :auto-upload="false"
                        ref="uploads"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-change="onsuccess"
                        :limit="9"
                        :file-list="fileList"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                        <!-- <div v-show="active!==1">
                          <img  v-for="(item,index) in imglist" :key="index" 
                            :src="'data:image/png;base64,' + item.fileData"
                            style="width: 148px; height:148px;border-radius: 6px; border: 1px solid #ccc; margin: 5px;"
                            alt="">
                        </div> -->
                      <el-dialog :visible.sync="dialogVisibles" :append-to-body="true">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row v-show="active==1||active==2">
                  <el-col :span="12">
                    <el-form-item label="报修人" prop="createUserCode">
                      <el-input v-model="createUserCode" size="small" placeholder="自动生成" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row >
                  <el-col :span="24">
                    <el-form-item label="优先级别" prop="priorityLevel">
                      <el-radio-group v-model="formdata.priorityLevel">
                        <el-radio :label="0">重要</el-radio>
                        <el-radio :label="1">一般</el-radio>
                        <el-radio :label="2">严重</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row  v-show="active==1||active==2">
                  <el-col :span="24">
                    <el-form-item label="填报时间" prop="createDate">
                      <el-input v-model="formdata.createDate" placeholder="自动生成" size="small" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
          <el-form ref="formjiedan" :model="formjiedan" label-width="80px" >
            <el-row v-show="active==3||active==4||active==5">
                  <el-divider></el-divider>
                  <div class="title">接单信息</div>
                  <el-col :span="24">
                    <el-form-item label="接单人" prop="receiveUserCode">
                      <el-input v-model="receiveUserName" size="small" placeholder="自动生成" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row v-show="active==3||active==4||active==5">
                  <el-col :span="24">
                    <el-form-item label="接单时间" prop="receiveDate">
                      <el-input v-model="formjiedan.receiveDate" size="small" placeholder="自动生成" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
          <el-form ref="formchuli" :model="formchuli" :rules="formrules" label-width="80px" >
            <el-row v-show="active==4||active==5">
                  <el-divider></el-divider>
                  <div class="title">处理信息</div>
                  <el-col :span="24">
                    <el-form-item label="解决方案" prop="solution">
                      <el-input v-model="formchuli.solution" type="textarea" placeholder="请输入解决方案" :disabled="active==5||flag?true:false"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row v-show="active==4||active==5">
                  <el-col :span="24">
                    <el-form-item label="处理图片"> 
                      <el-upload
                        :disabled="active==5||flag?true:false"
                        :auto-upload="false"
                        ref="uploads"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-change="onsuccesschuli"
                        :limit="9"
                        :file-list="chulifileList"
                        :on-preview="handlePictureCardPreviewchuli"
                        :on-remove="handleRemovechuli">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisiblechuli" :append-to-body="true">
                        <img width="100%" :src="dialogImageUrlchuli" alt="">
                      </el-dialog>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row v-show="active==4||active==5">
                  <el-col :span="24">
                    <el-form-item label="处理人" prop="receiveUserCode">
                      <el-input v-model="receiveUserCodename" size="small" placeholder="自动生成" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row v-show="active==4||active==5">
                  <el-col :span="24">
                    <el-form-item label="完成时间" prop="finishDate">
                      <el-input v-model="formchuli.finishDate" size="small" placeholder="自动生成" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  size="small" v-show="active==1&&!flag&&isupdate" @click="toupdate" >确 认</el-button>
        <el-button type="primary"  size="small" v-show="active==1&&!flag&&!isupdate" @click="subandti(0)" >保 存</el-button>
        <el-button type="primary"  size="small" v-show="active==1&&!flag&&!isupdate" @click="subandti(1)" >保存并提交</el-button>
        <el-button type="primary"  size="small" v-show="active==2&&!flag&&!isupdate" @click="tijiaoform" >提 交</el-button>
        <el-button type="primary"  size="small" v-show="active==3&&!flag" @click="tojiedan">接 单</el-button>
        <el-button type="primary"  size="small" v-show="active==4&&!flag&&!isupdate" @click="tochuli">处 理</el-button>
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {base64ToFile,base64ToBlob} from '@/utils/tofile'
import axios from 'axios'
import { getzidianxialaapi } from '@/api/guidelines'
import {
  postaddworkapi, getworkimgapi, posttijiaoworkapi, postupdateworkapi, postjiedanworkapi,
  postchuliworkapi, getworkcodeapi,setwxfileaou
} from '@/api/system/WorkManage'
export default {
  name: 'CallPoliceWorkdialog',
  props: {
    qiyelist: {
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      flag:false,
      active: 1,
      formdata: {},
      formjiedan: {},
      formchuli:{},
      createUserCode:'',
      dialogVisible: false,
      dialogImageUrl: '',
      dialogVisibles: false,
      fileList: [],
      typelist: [],
      userinfo:{},
      isupdate: false,
      receiveUserName: '',
      receiveUserCodename: '',
      rules:{
        orgNo:[{ required: true, message: '请选择所属企业', trigger: 'change' }],
        type:[{ required: true, message: '请选择业务类型', trigger: 'change' }],
        title:[{ required: true,  message: '请输入工单标题', trigger: 'blur' }],
        problemDescription:[{ required: true,  message: '请输入问题描述', trigger: 'blur' }],
        priorityLevel:[{ required: true, message: '请选择优先级别', trigger: 'change' }],
      },
      formrules: {
        solution: [{ required: true,  message: '请输入解决方案', trigger: 'blur' }]
      },
      chulifileList: [],
      dialogVisiblechuli:false,
      dialogImageUrlchuli:''
    };
  },

  async mounted() {
    const { data: { list } } = await getzidianxialaapi({ dictType: 'XSGL_ZYZDSLX' })
    this.typelist=list
  },

  methods: {
    // 保存/保存并提交
    async subandti(val) {
      await this.$refs.form.validate()
      let formData = new FormData();  
      this.fileList.forEach(ele => {
        formData.append('uploadFile', ele.raw)
      })
      formData.append('state', val)
      formData.append('createUserCode',  this.userinfo.userNo)
      formData.append('orgNo', this.formdata.orgNo)
      formData.append('type', this.formdata.type)
      formData.append('code', this.formdata.code)
      formData.append('title', this.formdata.title)
      formData.append('problemDescription', this.formdata.problemDescription)
      formData.append('priorityLevel', this.formdata.priorityLevel)
      formData.append('createDate', this.formdata.createDate)
      await postaddworkapi(formData).then(res => {
        if (res.code == '200') {
          this.quxiao()
          this.dialogVisible = false 
          this.$emit('getlist')
        }
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message: res.code == '200'&&val==1 ? '新增并提交成功':res.code == '200'&&val==0 ? '新增成功':res.message
        })
      })
    },
    // 提交
    async tijiaoform() {
      await posttijiaoworkapi({ createUserCode: this.formdata.createUserCode, id: this.formdata.id, submitDate: this.gettime() }).then(res => {
        if (res.code == '200') {
          this.quxiao()
          this.dialogVisible = false 
          this.$emit('getlist')
        }
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message: res.code == '200' ? '提交成功':res.message
        })
      })
    },
    // 确认修改
    async toupdate() {
      let formData = new FormData();  
      this.fileList.forEach(ele => {
        formData.append('uploadFile', ele.raw)
      })
      const {id,type,title,priorityLevel,problemDescription,createDate}=this.formdata
      formData.append('id',id)
      formData.append('type', type)
      formData.append('title', title)
      formData.append('priorityLevel', priorityLevel)
      formData.append('problemDescription', problemDescription)
      formData.append('createDate', createDate)
      await postupdateworkapi(formData).then(res => {
        this.setmessage(res,'修改成功')
      })
    },
    // 修改
    updaworks(val, row) {
      this.isupdate=true
      this.tijiao(row, val)
    },
    // 新增
    async getadd(entity, val) {
      this.userinfo={...entity}
      this.dialogVisible = true
      this.active = val
      this.$set(this,'createUserCode',entity.userName)
      this.$set(this.formdata, 'createDate', this.gettime())
    },
    // 获取code
    async changetype(val) {
      const {data:{entity:codetype}}=await getworkcodeapi({type:val})
      this.$set(this.formdata,'code',codetype)
    },
    // 提交
    async tijiao(row, val) {
      this.active = val
      this.dialogVisible = true
      this.$set(this,'receiveUserName',row.createUserName)
      this.$set(this,'createUserCode',row.createUserName)
      this.$set(this, 'receiveUserCodename', row.receiveUserName)
      this.$set(this.formjiedan, 'receiveDate', this.gettime())
      this.$set(this.formchuli, 'finishDate', this.gettime())
      this.formdata = { ...row }
      this.formjiedan = { ...row }
      this.formchuli = { ...row }
      const { data: { list } } = await getworkimgapi({id:row.id,type:'0'})
      list.forEach(ele => {
        this.fileList.push({
          raw: new File([base64ToBlob('data:image/jpeg;base64,' + ele.fileData)], ele.fileName),
          url:'data:image/jpeg;base64,'+ele.fileData,
          name:ele.fileName
        })
      })
      if(val==5) this.chuliimg(row)
    },
    // 确认接单
    async tojiedan() {
      await postjiedanworkapi({ id: this.formdata.id, receiveDate: this.formjiedan.receiveDate, receiveUserCode: this.userinfo.userNo }).then(res => {
        this.setmessage(res,'接单成功')
      })
    },
    // 接单
    jiedans(row) {
      this.userinfo={...row}
      this.receiveUserName = row.userName
    },
    // 确认处理
    async tochuli() {
      await this.$refs.formchuli.validate()
      let formData = new FormData();  
      this.chulifileList.forEach(ele => {
        formData.append('uploadFile', ele.raw)
      })
      const {data:{entity:handlePictureIds}}  = await setwxfileaou( formData )
      await postchuliworkapi({ id: this.formdata.id, ...this.formchuli, receiveUserCode: this.userinfo.userNo,handlePictureIds }).then(res => {
        this.setmessage(res,'处理成功')
      })
    },
    // 处理
    async chulis(row) {
      this.userinfo = { ...row }
      this.receiveUserCodename = row.userName
    },
    // 处理图品回显
    async chuliimg(row) {
      const { data: { list } } = await getworkimgapi({id:row.id,type:'1'})
      list.forEach(ele => {
        this.chulifileList.push({
          raw: new File([base64ToBlob('data:image/jpeg;base64,' + ele.fileData)], ele.fileName),
          url:'data:image/jpeg;base64,'+ele.fileData,
          name:ele.fileName
        })
      })
    },
    onsuccess(response, fileList) {
      this.fileList=fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibles = true;
    },
    handleRemove(response, fileList) {
      this.fileList=fileList
    },
    handleRemovechuli(response, fileList) {
      this.chulifileList=fileList
    },
    handlePictureCardPreviewchuli(file) {
      this.dialogImageUrlchuli = file.url;
      this.dialogVisiblechuli = true;
    },
    onsuccesschuli(response, fileList) {
      this.chulifileList=fileList
    },
    quxiao() {
      this.$refs.form.resetFields()
      this.$refs.formchuli.resetFields()
      this.formdata = this.$options.data().formdata
      this.formjiedan = this.$options.data().formjiedan
      this.formchuli = this.$options.data().formchuli
      this.$refs.uploads.clearFiles()
      this.createUserCode =this.receiveUserCodename= ''
      this.flag = this.isupdate = false
      this.fileList = []
      this.chulifileList=[]
    },
    gettime () {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() // 日
      const ho = date.getHours();
      const hour=ho<10?'0'+ho:ho
      const min = date.getMinutes();
      const minute=min<10?'0'+min:min
      const  sec= date.getSeconds();
      const second=sec<10?'0'+sec:sec
      return year + '-' + month + '-' + day+' '+hour+':'+minute+':'+second
    },
    setmessage(res,name) {
      if (res.code == '200') {
          this.quxiao()
          this.dialogVisible = false 
          this.$emit('getlist')
        }
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message: res.code == '200' ? name:res.message
        })
    }
  },
  watch:{
    dialogVisible(val) {
      if(!val) this.quxiao()
    }
  }
};
</script>
<style lang="scss" scoped>
.title{
  margin: 10px 0;
  color: #000;
  font-weight: 600;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
</style>